<template>
    <div class="myzhuye">
      <header>
        <div class="search">
          <div class="search_default" @click="search">
            <img src="../layout/img/icons/search.png" alt="">
            <span >玩具</span>
          </div>
        </div>
        <span class="display"></span>
        <div class="ss"><van-tabs>
          <van-tab v-for="(value,index) in nav_arr" :key="index" :title="'' + value">
            内容 {{ value }}
          </van-tab>
        </van-tabs>
        </div>
      </header>
      <router-view></router-view>
      <footer>
        <div class="foot_img">
          <img src="../layout/img/icons/shouye.png" alt="">
          <img src="../layout/img/icons/redserach.png" alt="">
          <img src="../layout/img/icons/tuijian.png" alt="">
          <img src="../layout/img/icons/play.png" alt="">
          <img src="../layout/img/icons/shouye.png" alt="">
        </div>
        <div class="foot_word">
          <span @click="go_main">首页</span>
          <span @click="go_search">找货</span>
          <span @click="go_fight">拼购推荐</span>
          <span @click="go_play">玩法介绍</span>
          <span @click="go_mine">我的拼购</span>
        </div>
      </footer>
<!--      轮播未做-->
      <!--<div content="swipe2">1111</div>-->
      <div class="Hot-list">
        <div class="top">
          <img src="../layout/img/icons/ranking.png"/>热拼榜
        </div>
        <div class="content" v-for="(index, key) in images" :key="key">
          <div class="rb"><img src="../layout/img/icons/rb.png"/>
          </div>
          <div class="sp"><img :src="index"></div>
          <div class="yt">婴童服饰榜</div>
          <div class="gm">3.6万次购买</div>
        </div>
    </div>
      <div class="jxrm"><img src="../layout/img/icons/star.png"/> 精选热卖</div>
      <div class="commodity2">
        <div class="commodity" v-for="(index, key) in res" :key="key">
        <div class="lift"><img :src="index.images"></div>
        <div class="right">
          <div class="top">{{index.word}}</div>
          <div class="content">{{index.word_1}} | {{index.word_2}}| {{index.word_3}}</div>
          <div class="quantity">已拼{{index.muns}}件</div>
          <div class="price">￥{{index.money}} <div class="ljkp">立即开拼</div></div>
        </div>
      </div>
      </div>
    </div>
</template>

<script>
export default {
  name: 'zhuye',
  data() {
    return {
      nav_arr: ['精选', '食品', '母婴', '家居', '女装', '生活', '旅游', '潮流', '游戏', '娱乐'],
      images: [],
      res: [],
    };
  },
  mounted() {
    this.$http.mock_image()
      .then((res) => {
        this.images = res.data.img;
        this.res = res.data.num;
      });
  },
  methods: {
    go_main() {
      this.$router.push('/main');
    },
    go_search() {
      this.$router.push('/search_goods');
    },
    go_fight() {
      this.$router.push('/fight_buy');
    },
    go_play() {
      this.$router.push('/play');
    },
    go_mine() {
      this.$router.push('/my_buy');
    },
    search() {
      this.$router.push('/search');
    },
  },
};
</script>

<style scoped lang="scss">
  *{
    margin: 0;
    padding: 0;}
  .myzhuye {
    width: 1237px;
    box-sizing: border-box;
    overflow: hidden;
    header {
      position: fixed;
      z-index: 999;
      left: 0;
      top: 0;
      width: 100vw;
      height: 275px;
      box-sizing: border-box;
      .ss{
        position: fixed;
        top: 157px;
        right: 0;
        left: 0;
        z-index: 998;
      }
      .display {
        display: inline-block;
        width: 120px;
        height: 120px;
        position: fixed;
        right: 0;
        top: 157px;
        z-index: 999;
        background: url("../layout/img/icons/bbb.png") center no-repeat white;
        box-shadow: -20px 0 0 0 rgba(0, 0, 0, 0.05);
      }

      .search {
        width: 1163px;
        height: 104px;
        border-radius: 52px;
        margin: 25px auto;
        background-color: #fff;
        position: relative;
        z-index: 999;

        .search_default {
          text-align: center;

          img {
            display: inline-block;
            width: 80px;
            vertical-align: -20px;
            margin-top: 10px;
          }

          span {
            display: inline-block;
            font-size: 40px;
            color: #666;
          }
        }
      }
    }

    footer {
      z-index: 999;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 0;
      background-color: white;
      .foot_img {
        display: flex;
        justify-content: space-around;

        img {
          display: inline-block;
          width: 74px;
          height: 74px;
          cursor: pointer;
        }
      }

      .foot_word {
        margin-top: 10px;

        span {
          font-size: 40px;
          display: inline-block;
          cursor: pointer;
          color: #666;
        }

        span:nth-child(1) {
          margin-left: 85px;
        }

        span:nth-child(2) {
          margin-left: 165px;
        }

        span:nth-child(3) {
          margin-left: 126px;
        }

        span:nth-child(4) {
          margin-left: 90px;
        }

        span:nth-child(5) {
          margin-left: 90px;
        }
      }
    }
/*.swipe2 {*/
      /*width: 1162px;*/
      /*height: 586px;*/
      /*background-color: red;*/
      /*margin-top: 1000px;*/
      /*z-index: 9999;*/
    /*}*/
.Hot-list {
      width: 1162px;
      height: 570px;
       margin: 10px auto;
      .top {
        line-height: 110px;
        font-size: 50px;

        img {
          display: inline-block;
          vertical-align: -5px;
          width: 50px;
        }
      }
    .content {
      position: relative;
      width: 348px;
      height: 435px;
      border: 2px solid pink;
      border-radius: 10px;
      float: left;
      margin-right: 20px;
      .rb {
        position: absolute;
        z-index: 99;
        top: 0;
        left: 50px;
        img {
          width: 100px;
        }
      }
      .sp {
        margin: 10px auto;
        width: 264px;
        height: 264px;
        img {
          width: 264px;
          height: 264px;
        }
      }
      .yt {
        width: 260px;
        line-height: 66px;
        background-color: pink;
        color: palevioletred;
        margin: 0 auto;
        font-size: 40px;
        border: 1px solid pink;
        border-radius: 30px;
        text-align: center;
      }
      .gm {
        font-size: 40px;
        margin: 0 auto;
        width: 260px;
        line-height: 66px;
        text-align: center;
      }
    }
  }
    .jxrm{
      left: 468.5px;
      right: 468.5px;
      width: 300px;
      line-height: 71px;
      font-size: 50px;
      color: pink;
      margin: 10px auto;
      img{
        width: 50px;
      }
    }
    .commodity2{
      margin: 0 auto;
      top: 2151px;
      left: 35px;
      right: 35px;
      .commodity{
      margin: 10px auto;
      width: 1162px;
      height: 535px;
      border: 1px solid #000;
      border-radius: 10px;
      .lift{
        img{
          width: 462px;
        height: 462px;
        }
        margin:30px 10px;
        display: inline-block;
        width: 462px;
        height: 462px;
        background-color: orchid;
        box-sizing: border-box;
        border-right: 1px solid #000;
        float: left;
      }
      .right{
        float: left;
        text-align: left;
        .top{
          margin-top: 20px ;
          font-size: 55px;
        }
        .content{
          margin-top: 40px ;
          font-size: 40px;
          color: #666666;
        }
        .quantity{
          margin-top: 40px ;
          font-size: 40px;
          color: #666666;
        }
        .price{
          margin-top: 140px ;
          line-height: 40px;
          font-size: 55px;
          color: pink;
           .ljkp{
             font-size: 40px;
             text-align: center;
          width: 212px;
          line-height: 70px;
          color: #ffffff;
          background-color: pink;
          border-radius: 30px;
             float: right;
        }
        }
      }
    }
    }

}

</style>
<!--//  <div class="right">-->
<!--          <div class="top">双荣</div>-->
<!--          <div class="content">奶香浓郁 | 日期新鲜| 工厂直发</div>-->
<!--          <div class="quantity">已拼7080件</div>-->
<!--          <div class="price">￥15.8</div>-->
<!--          <div class="ljkp">立即开拼</div>-->
